<template>
	<view class="my-content">
		<u-navbar :autoBack="true" :title="$t('新增商品')">
		</u-navbar>

		<view class="my-content-bottom" v-show="show">
			<swiper :current="step-1" style="height: calc(100vh - 200rpx)" :disable-touch="true">
				<swiper-item class="swiper-item" @touchmove.stop>
					<scroll-view scroll-y style="height: calc(100vh - 200rpx)">
						<view style="margin-left:20rpx;margin-top: 20rpx;height: 45rpx;">
							<view style="color: #ff7200;font-weight: bolder;float: left;">|</view>
							<view style="float: left;line-height: 45rpx;margin-left: 1%;">{{$t("基础信息")}}</view> 
						</view>
						<view style="border: 1px solid #cccccc;clear: both;width:90%;margin:0 auto;margin-top: 5%;"></view>
						<buildForm v-if="formLoading" :formItems="formItems1" :value="form1" :postlogo="form1.logo" :postvideo="form1.videos"
							@input="formInput($event,'form1')" :postcate="form1.fc_name" :postcates="form1.fc2_name" :postid="id"/>
						<u-button :custom-style="customStyle" hover-class="none" :disabled="subDisabled" type="primary"
							@click="nextStep">{{ $t('下一步') }}
						</u-button>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" @touchmove.stop>
					<scroll-view scroll-y style="height: calc(100vh - 200rpx)">
						<view style="margin-left:20rpx;margin-top: 20rpx;height: 45rpx;">
							<view style="color: #ff7200;font-weight: bolder;float: left;">|</view>
							<view style="float: left;line-height: 45rpx;margin-left: 1%;">{{$t("参考规格")}}</view> 
						</view>
						<buildForms v-if="formLoading" :formItems="formItems2" :value="form2"
							@input="formInput($event,'form2')" :postunit="form2.number_unit" :postparameter="form2.parameter" :postparameter_ru="form2.parameter_ru" :postspxq="form2.buy_images"  :postfiles="form2.buy_files"/>
						<view class="my-step" @click="prevStep">{{ $t('上一步') }}</view>
						<u-button :custom-style="customStyle" hover-class="none" :disabled="subDisabled" type="primary"
							@click="nextSteps">{{ $t('下一步') }}
						</u-button>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" @touchmove.stop>
					<scroll-view scroll-y style="height: calc(100vh - 200rpx)">
						<view style="margin-left:20rpx;margin-top: 20rpx;height: 45rpx;">
							<view style="color: #ff7200;font-weight: bolder;float: left;">|</view>
							<view style="float: left;line-height: 45rpx;margin-left: 1%;">{{$t("批次信息")}}</view> 
						</view>
						<buildFormss v-if="formLoading" :formItems="formItems3" :value="form3"
							@input="formInput($event,'form3')" :postcity="form3.city" :postfkfs="form3.pay_type" :postyf="form3.is_express_price"
							:postid="id"/>
						<view class="my-step" @click="prevStep">{{ $t('上一步') }}</view>
						<!-- <u-button :custom-style="customStyle" hover-class="none" :disabled="subDisabled" type="primary"
							@click="nextStepss">{{ $t('下一步') }}
						</u-button> -->
						<u-button v-if="id==0" hover-class="none" :custom-style="customStyle" :loading="subDisabled" type="primary"
							@click="subForm">{{ $t('确认新增商品') }}
						</u-button>
						<u-button v-else-if="id>0" hover-class="none" :custom-style="customStyle" :loading="subDisabled" type="primary"
							@click="subForm">{{ $t('保存修改') }}
						</u-button>
					</scroll-view>
				</swiper-item>
				<!-- <swiper-item class="swiper-item" @touchmove.stop>
					<scroll-view scroll-y style="height: calc(100vh - 200rpx)">
						<buildForm v-if="formLoading" :formItems="formItems4" :value="form4"
							@input="formInput($event,'form4')" />
						<view class="my-step" @click="prevStep">{{ $t('上一步') }}</view>
						<u-button hover-class="none" :custom-style="customStyle" :loading="subDisabled" type="primary"
							@click="subForm">{{ $t('发布') }}
						</u-button>
					</scroll-view>
				</swiper-item> -->
			</swiper>
			<!-- <view style="padding-bottom: 34.88rpx">
				<view class="my-step" v-show="step > 1" @click="prevStep">{{ $t('上一步') }}</view>
				<u-button :custom-style="customStyle" v-show="step < 4" hover-class="none" :disabled="subDisabled"
					type="primary" @click="nextStep">{{ $t('下一步') }}
				</u-button>
				<u-button hover-class="none" v-show="step == 4" :custom-style="customStyle" :disabled="subDisabled"
					type="primary" @click="subForm">{{ $t('发布') }}
				</u-button>
			</view> -->
		</view>
		<!-- 页面弹窗 -->
		<Rate v-if="reveal" :close="true" @change="reveal = !reveal">
			<view class="content">
				{{ lang == 'zh' ? pop.con : pop.con_ru }}
			</view>
		</Rate>
		<!-- 俄罗斯分享弹窗 -->
		<u-mask :show="mask" v-if="lang == 'ru'" @click="mask = false">
			<view class="mask">
				<view style="text-align: center;">Публикуйте ссылку бесплатно</view>
				<view>www.gluz.com.cn</view>
				<view class="fz" @click="cation">скопирова</view>
			</view>
		</u-mask>
		<Permission></Permission>
	</view>
</template>

<script>
	import Rate from "./components/frame.vue"
	import buildForm from "./components/index.vue"
	import buildForms from "./components/indexs.vue"
	import buildFormss from "./components/indexss.vue"
	import Permission from "./components/Permission.vue"
	import {
		formItems
	} from "./formItems";
	import {
		mapForm,
		mapFormItems,
		formRules
	} from '../buildFormItems.js';
	import {
		IMAGE_URL,IMAGE_PIC
	} from "@/config/app";

	export default {
		components: {
			buildForm,
			Rate,
			buildForms,
			buildFormss,
			Permission
		},
		data() {
			return {
				customStyle: {
					width: '656rpx',
					height: '90rpx',
					background: 'linear-gradient(110deg, #000 0%, #000 100%)',
					borderRadius: '8rpx'
				},
				copy: true,
				getRuss: false,
				mask: false,
				lang: this.$i18n.locale,
				reveal: false,
				id: 0,
				form1: {},
				form2: {},
				form3: {},
				form4: {},
				goods_type_list: [{
						value: "1",
						label: "中国货物",
						bgImage: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20230726/09cf57a149882fe77d8b57e874f36ad0.png"
					},
					{
						value: "2",
						label: "俄罗斯货物",
						bgImage: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20230726/09cf57a149882fe77d8b57e874f36ad0.png"
					},
					{
						value: "3",
						label: "在俄中国货物",
						bgImage: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20230726/09cf57a149882fe77d8b57e874f36ad0.png"
					},
					{
						value: "4",
						label: "在中俄罗斯货物",
						bgImage: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20230726/09cf57a149882fe77d8b57e874f36ad0.png"
					}
				],
				goods_type_index: 0,
				formItems1: [],
				formItems2: [],
				formItems3: [],
				formItems4: [],
				details: null,
				formLoading: false, // 加载完成后再引入组件,
				type: "1",
				show: true,
				pop: {},
				subDisabled: false,
				step: 1
			}
		},
		onLoad(options) {
			this.$u.api.basic.getPopup({
				type: '货物'
			}).then(res => {
				if (res != null) {
					this.pop = res
				}
				// console.log(res);
			})
			this.$u.api.basic.getRussiaReleaseNum().then(res => {
				this.getRuss = res.show
			})
			let temp = JSON.parse(JSON.stringify(formItems))
			this.id = options.id ? options.id : 0
			this.type = options.type ? options.type : "1"
			if (this.type === '1') {
				//不是竞拍
				this.formItems1 = temp["hwcs"][0]
				this.formItems2 = temp["hwcs"][1]
				this.formItems3 = temp["hwcs"][2]
				this.formItems4 = temp["hwcs"][3]
			} else {
				//竞拍
				this.formItems1 = temp["hwjb"][0]
				this.formItems2 = temp["hwjb"][1]
				this.formItems3 = temp["hwjb"][2]
				this.formItems4 = temp["hwjb"][3]
			}

			this.formItems = temp
			if (this.id > 0) {
				this.getDetail()
			} else {
				mapForm(this.formItems1, this.id).then(res => {
					this.form1 = res
					this.formLoading = true
				})
				mapForm(this.formItems2, this.id).then(res => {
					this.form2 = res
					this.formLoading = true
				})
				mapForm(this.formItems3, this.id).then(res => {
					this.form3 = res
					this.formLoading = true
				})
				mapForm(this.formItems4, this.id).then(res => {
					this.form4 = res
					this.formLoading = true
				})
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("货物")
			})
		},
		methods: {
			nextStep() {
				console.log(this.form1);
				if (!this.form1.name) {
					this.$u.toast(this.$t("请输入商品名称"))
					return false
				}
				if (!this.form1.goods_type) {
					this.$u.toast(this.$t("请选择货物类型"))
					return false
				}
				if (!this.form1.logo) {
					this.$u.toast(this.$t("请上传商品主图"))
					return false
				}
				if (!this.form1.p_category_id) {
					this.$u.toast(this.$t("请选择商品分类"))
					return false
				}
				if (!this.form1.category_id) {
					this.$u.toast(this.$t("请选择二级分类"))
					return false
				}
				this.step++
			},
			nextSteps() {
				console.log(this.form2);
				if (!this.form2.desire_price) {
					this.$u.toast(this.$t("请输入数字"))
					return false
				}
				if (!this.form2.goods_num) {
					this.$u.toast(this.$t("请输入数字"))
					return false
				}
				if (!this.form2.number_unit) {
					this.$u.toast(this.$t("请输入数字"))
					return false
				}
				if (!this.form2.goods_brief) {
					this.$u.toast(this.$t("请输入商品介绍"))
					return false
				}
				this.step++
			},
			prevStep() {
				this.step--
			},
			duplication() {
				this.mask = !this.mask
			},
			cation() {
				this.getRuss = false
				this.mask = !this.mask
				uni.setClipboardData({
					data: 'www.gluz.com.cn', //当前点击的地址
					success: () => {
						this.$u.toast('Подтверждаю.')
					}
				})
			},
			getDetail() {
				const that = this
				that.$u.api.user.getGoodsDetail({
					id: that.id,
					lang:this.lang
				}).then(res => {
					that.details = res
					that.form1=res
					that.form1.logo.value=res.logo
					that.form2=res
					that.form3=res
					// 货物类型匹配
					for (let i in that.goods_type_list) {
						if (that.goods_type_list[i].value === res.goods_type) {
							that.goods_type_index = parseInt(i)
						}
					}
					mapFormItems(that.formItems, that.details).then(mapRes => {
						console.log(that.formItems)
						that.formItems = mapRes
					})
					mapForm(that.formItems, that.id).then(formRes => {
						console.log(formRes)
						that.form = formRes
						this.formLoading = true
					})
				}).catch(err => {
					console.log(err)
				})
			},
			subForm() {
				const that = this
				if (!this.form3.desire_speed) {
					this.$u.toast(this.$t('请输入数字'))
					return false
				}
				if (!this.form3.departure_city) {
					this.$u.toast('请选择')
					return false
				}
				if (this.getRuss && this.lang == 'ru') {
					return this.duplication()
				}
				this.subDisabled = true
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				that.$u.api.user.saveUserGoods({
					// ...this.form1,
					// ...this.form2,
					// ...this.form3,
					id:this.form1.id,
					name:this.form1.name,
					goods_type:this.form1.goods_type,
					logo:this.form1.logo,
					buy_videos:this.form1.buy_videos,
					brand:this.form1.brand,
					p_category_id:this.form1.p_category_id,
					category_id:this.form1.category_id,
					
					desire_price:this.form2.desire_price,
					price_unit: this.form2.price_unit,
					goods_num:this.form2.goods_num,
					number_unit:this.form2.number_unit,
					goods_weight:this.form2.goods_weight,
					goods_volume:this.form2.goods_volume,
					goods_l:this.form2.goods_l,
					goods_w:this.form2.goods_w,
					goods_h:this.form2.goods_h,
					goods_brief:this.form2.goods_brief,
					parameter:this.form2.parameter,
					buy_images:this.form2.buy_images,
					buy_files:this.form2.buy_files,
					
					desire_speed:this.form3.desire_speed,
					departure_city:this.form3.departure_city,
					is_express_price:this.form3.is_express_price,
					pay_type:this.form3.pay_type,
					
					// goods_type: this.goods_type_list[this.goods_type_index].value
				}).then(res => {
					uni.hideLoading();
					this.$u.toast(this.$t('发布成功，请等待后台审核'))
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages/user/goods/goodslist'
						})
						this.subDisabled = false
					}, 1000)
				}).catch(err => {
					console.log(err);
				})
			},
			selType(index) {
				this.goods_type_index = index
				setTimeout(() => {
					this.show = false
					if (Object.keys(this.pop).length !== 0) {
						this.reveal = true
					}
				}, 100)
			},
			formInput(val, form) {
				this[form] = val
			}
		},
		computed: {
			toImages() {
				return (src) => {
					try {
						return IMAGE_URL + src
					} catch (e) {
						
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: $u-type-success;
	}

	.my-step {
		width: 100%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.my-content {
		padding: 20rpx;
		background-color: $my-bgColorF6F6F6;
		// height: 100%;


		.mu-content-top {
			width: 100%;
			height: 100%;
			// background-color: $my-bgColorFFFFFF;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.my-content-bottom {
			// margin-top: 320rpx;
			background-color: $my-bgColorFFFFFF;
			border-radius: 14rpx;
			// overflow: hidden;
			// height: 100%;
		}
	}

	.content {
		width: 450rpx;
		margin-bottom: 100rpx;
		color: white;
	}


	::v-deep .transition {
		// width: 100vh;
		// min-height: 100%;
		// overflow: hidden;
	}
</style>